<template>
  <a-tabs size="small">
    <a-tab-pane key="config" tab="配置">
      <a-form :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
        <a-row>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24" ref="value">
            <a-form-item label="节点名称">
              <a-input placeholder="请输入节点名称" :size="size" :defaultValue="cell.value" @change="(e) => (cell.value = e.target.value)" />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24" ref="loopVariableName">
            <a-form-item label="循环变量">
              <a-input
                placeholder="请输入循环变量"
                :size="size"
                :defaultValue="getCellValue(props, 'loopVariableName')"
                @change="(e) => setCellValue(props, 'loopVariableName', e)"
              />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24" ref="loopCount">
            <a-form-item label="循环次数">
              <a-input
                placeholder="请输入循环次数"
                :size="size"
                :defaultValue="getCellValue(props, 'loopCount')"
                @change="(e) => setCellValue(props, 'loopCount', e)"
              />
            </a-form-item>
          </a-col>
          <a-col ref="table">
            <TableAndModal :batchAddBtn="false" :editor="editor" :cell="cell" :config="tableConfig" :direction="direction" @tableData="tableData" />
          </a-col>
        </a-row>
      </a-form>
    </a-tab-pane>
  </a-tabs>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import { setCellValue, getCellValue } from '../utils/tools';
  import TableAndModal from '../components/tableAndModal.vue';
  const props = defineProps({
    direction: { type: String, default: 'bottom' },
    cell: { type: Object },
    editor: { type: Object },
  });
  const size = ref('small');
  const formItemLayout = reactive({
    labelCol: { span: 4 },
    wrapperCol: { span: 17 },
    colSpan: 8,
  });
  const tableConfig = reactive({
    title: '变量',
    keyPrefix: 'variable',
    keys: ['variable-name', 'variable-value', 'variable-description'],
    columns: [
      {
        title: '变量名',
        dataIndex: 'variable-name',
        width: '10%',
        slots: {
          customRender: 'variable-name',
        },
      },
      {
        title: '变量值',
        dataIndex: 'variable-value',
        width: '45%',
        slots: {
          customRender: 'variable-value',
        },
      },
      {
        title: '描述',
        dataIndex: 'variable-description',
        width: '25%',
        slots: {
          customRender: 'variable-description',
        },
      },
      {
        title: '操作',
        dataIndex: 'operation',
        width: '20%',
        slots: {
          customRender: 'action',
        },
      },
    ],
  });
  const value = ref();
  const loopVariableName = ref();
  const loopCount = ref();
  const table = ref(null);
  const tabledata = ref();

  function tableData(datas) {
    tabledata.value = datas;
  }

  // // 监控消息
  // watch(
  //   () => props.cell,
  //   (val) => {
  //     console.log('wang-variable-cell', val);
  //   },
  //   { immediate: true, deep: true },
  // );

  defineExpose({
    value,
    loopVariableName,
    loopCount,
    table,
    tabledata,
  });
</script>

<style lang="less" scoped></style>
